<template>
  <div class="user-profile">
    <van-nav-bar
      title="个人资料"
      left-text="返回"
      @click-left="onClickLeft"
    />
    <van-list>
      <van-cell-group>
        <van-cell
          title="头像"
          is-link
          @click="goToAvatarEdit"
        >
          <template #right-icon>
            <van-image
              width="40px"
              height="40px"
              fit="cover"
              src="/src/assets/10.png"
              class="avatar"
            />
          </template>
        </van-cell>
        <van-cell
          title="昵称"
          value="千语"
          is-link
          @click="goToNicknameEdit"
        />
        <van-cell
          title="ID"
          value="1433560078"
          is-link
          @click="goToIdView"
        />
        <van-cell
          title="性别"
          value="女"
          is-link
          @click="goToGenderEdit"
        />
        <van-cell
          title="生日"
          is-link
          @click="goToBirthdayEdit"
        />
        <van-cell
          title="所在地区"
          is-link
          @click="goToRegionEdit"
        />
        <van-cell
          title="简介"
          is-link
          @click="goToProfileEdit"
        />
      </van-cell-group>
    </van-list>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const onClickLeft = () => {
  router.back();
};

const goToAvatarEdit = () => {
  router.push('/avatar-edit');
};

const goToNicknameEdit = () => {
  router.push('/nickname-edit');
};

const goToIdView = () => {
  router.push('/id-view');
};

const goToGenderEdit = () => {
  router.push('/gender-edit');
};

const goToBirthdayEdit = () => {
  router.push('/birthday-edit');
};

const goToRegionEdit = () => {
  router.push('/region-edit');
};

const goToProfileEdit = () => {
  router.push('/profile-edit');
};
</script>

<style scoped>
.user-profile {
  background-color: #f5f5f5;
  padding: 16px;
}
.avatar {
  border-radius: 50%;
  margin-right: 8px;
}
.van-cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.van-cell-group {
  margin-top: 16px;
}
</style>